﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户资料</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* 全局样式 */
        .container {
            width: 100%;
            height: 100vh;
            background-color: #fece90;
            overflow: hidden;
            position: relative;
        }

        /* 导航栏样式 */
        .nav-bar {
            width: 100%;
            height: 44px; /* 88rpx */
            background-color: #fece90;
            display: flex;
            align-items: center;
            padding: 0 150px; /* 300rpx */
            margin-top: 35px; /* 70rpx */
        }
        
        .fanhui-image {
            width: 30px; /* 60rpx */
            height: 30px; /* 60rpx */
            position: relative;
            right: 145px; /* 290rpx */
        }
        
        .back-btn {
            margin-right: 5px; /* 10rpx */
        }
        
        .back-icon {
            font-size: 20px; /* 40rpx */
        }
        
        .nav-title {
            width: 40px; /* 80rpx */
            height: 25px; /* 50rpx */
            position: relative;
            right: 150px; /* 300rpx */
        }

        /* 头像区域样式 */
        .avatar-container {
            width: 100%;
            height: 220px; /* 440rpx */
            background-color: #fece90;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 10px; /* 20rpx */
        }

        .avatar-border {
            width: 100px; /* 200rpx */
            height: 100px; /* 200rpx */
            border-radius: 50%;
            position: absolute;
            top: 80px; /* 160rpx */
            left: 25px; /* 50rpx */
            overflow: hidden;
        }

        .avatar-image {
            width: 100%;
            height: 100%;
            border-radius: 50%; /* 使图片呈圆形 */
        }

        /* 内容区域样式 */
        .content-container {
            width: 95%;
            height: 555px; /* 1110rpx */
            background-color: #fff;
            border-radius: 35px 35px 0 0; /* 70rpx */
            margin-top: -100px; /* -200rpx */
            padding: 30px 0 20px; /* 60rpx 0 40rpx */
            box-shadow: 0 -10px 15px rgba(0, 0, 0, 0.1); /* 0 -20rpx 30rpx */
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
        }

        .option-item {
            width: 90%;
            height: 50px; /* 100rpx */
            margin: 0 auto 10px; /* 20rpx */
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 15px; /* 30rpx */
            position: relative;
        }

        .option-left {
            display: flex;
            align-items: center;
            margin-left: 15px; /* 30rpx */
        }

        .option-icon {
            width: 20px; /* 40rpx */
            height: 20px; /* 40rpx */
            margin-right: 10px; /* 20rpx */
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .icon-person {
            width: 50px; /* 100rpx */
            height: 25px; /* 50rpx */
        }

        .icon-location {
            width: 50px; /* 100rpx */
            height: 25px; /* 50rpx */
        }

        .icon-people {
            width: 50px; /* 100rpx */
            height: 25px; /* 50rpx */
        }

        .icon-shield {
            width: 50px; /* 100rpx */
            height: 25px; /* 50rpx */
        }

        .option-text {
            font-size: 16px; /* 32rpx */
            color: #333;
            font-weight: bolder;
        }

        .option-right {
            width: 20px; /* 40rpx */
            height: 20px; /* 40rpx */
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 15px; /* 30rpx */
        }

        .arrow-icon {
            width: 25px; /* 50rpx */
            height: 25px; /* 50rpx */
        }

        /* 自定义线样式 */
        .custom-line {
            position: absolute;
            bottom: 5px; /* 10rpx */
            left: 22.5px; /* 45rpx */
            width: 90%; 
            height: 0.5px; /* 1rpx */
            background-color: #f0f0f0;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 导航栏 -->
        <div class="nav-bar" onclick="back()">
            <div class="back-btn">
                <img class="fanhui-image" src="https://www.ruanzi.net/jy/wxuser/103/images/pages/左.png" alt="返回" />
            </div>
            <img class="nav-title" src="https://www.ruanzi.net/jy/wxuser/103/images/pages/首页.png" alt="首页" />
        </div>

        <!-- 头像区域 -->
        <div class="avatar-container">
            <div class="avatar-border">
                <img class="avatar-image" src="https://www.ruanzi.net/jy/wxuser/103/images/pages/头像1.png" alt="用户头像" />
            </div>
        </div>

        <!-- 内容区域 -->
        <div class="content-container">
            <!-- 个人资料选项 -->
            <div class="option-item">
                <div class="option-left">
                    <div class="option-icon">
                        <img class="icon-person" src="https://www.ruanzi.net/jy/wxuser/103/images/pages/个人资料.png" alt="个人资料" />
                    </div>
                    <span class="option-text">个人资料</span>
                </div>
                <div class="option-right">
                    <img class="arrow-icon" src="https://www.ruanzi.net/jy/wxuser/103/images/pages/右.png" alt="箭头" />
                </div>
                <div class="custom-line"></div>
            </div>

            <!-- 地址管理选项 -->
            <div class="option-item">
                <div class="option-left">
                    <div class="option-icon">
                        <img class="icon-location" src="https://www.ruanzi.net/jy/wxuser/103/images/pages/地址管理.png" alt="地址管理" />
                    </div>
                    <span class="option-text">地址管理</span>
                </div>
                <div class="option-right">
                    <img class="arrow-icon" src="https://www.ruanzi.net/jy/wxuser/103/images/pages/右.png" alt="箭头" />
                </div>
                <div class="custom-line"></div>
            </div>

            <!-- 亲人绑定选项 -->
            <div class="option-item">
                <div class="option-left">
                    <div class="option-icon">
                        <img class="icon-people" src="https://www.ruanzi.net/jy/wxuser/103/images/pages/亲人绑定.png" alt="亲人绑定" />
                    </div>
                    <span class="option-text">亲人绑定</span>
                </div>
                <div class="option-right">
                    <img class="arrow-icon" src="https://www.ruanzi.net/jy/wxuser/103/images/pages/右.png" alt="箭头" />
                </div>
                <div class="custom-line"></div>
            </div>

            <!-- 账户安全选项 -->
            <div class="option-item">
                <div class="option-left">
                    <div class="option-icon">
                        <img class="icon-shield" src="https://www.ruanzi.net/jy/wxuser/103/images/pages/账户安全.png" alt="账户安全" />
                    </div>
                    <span class="option-text">账户安全</span>
                </div>
                <div class="option-right">
                    <img class="arrow-icon" src="https://www.ruanzi.net/jy/wxuser/103/images/pages/右.png" alt="箭头" />
                </div>
                <div class="custom-line"></div>
            </div>
        </div>
    </div>
    <script>
        function back() {
            window.location.href = "./we103104.htm";
        }
    </script>
</body>
</html>